<template>
  <div id="box">
    <div id="from" style="width: 600px;margin: auto">
      <h2 style="margin-left: 200px">电影添加</h2>
      <el-form ref="form" :model="movie" label-width="80px">
        <el-form-item label="电影名称">
          <el-input v-model="movie.fnName" placeholder="请正确填写电影名字" class="inp" />
        </el-form-item>

        <el-form-item label="电影图片">
          <el-input v-model="movie.fnImg" placeholder="请添加图片云链接(一经确认不得更改)" class="inp" />
        </el-form-item>

        <el-form-item label="宣传海报">
          <el-input v-model="movie.fnPic" placeholder="请添加宣传图云链接(一经确认不得更改)" class="inp" />
        </el-form-item>

        <el-form-item label="电影导演">
          <el-input v-model="movie.fnDirector" placeholder="请添加电影导演" class="inp" />
        </el-form-item>

        <el-form-item label="主要演员">
          <el-input v-model="movie.fnActor" placeholder="请添加主演(最好用空格连接)" class="inp" />
        </el-form-item>

        <el-form-item label="语言选择">
          <el-select v-model="movie.fnLanguage" placeholder="请选择放映语言">
            <el-option label="中文" value="中文" />
            <el-option label="英文" value="英文" />
          </el-select>
        </el-form-item>

        <el-form-item label="是否推荐">
          <el-select v-model="movie.fnishow" placeholder="请选择是否展示首页">
            <el-option label="展示首页" value="1" />
            <el-option label="不展示首页" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item label="场厅选择">
          <el-select v-model="movie.fnSence" placeholder="请选择播放场厅">
            <el-option label="1号激光厅" value="1" />
            <el-option label="2号激光厅" value="2" />
            <el-option label="3号激光厅" value="3" />
            <el-option label="4号激光厅" value="4" />
            <el-option label="5号激光厅" value="5" />
            <el-option label="6号激光厅" value="6" />
            <el-option label="7号激光厅" value="7" />
            <el-option label="8号激光厅" value="8" />
            <el-option label="9号激光厅" value="9" />
            <el-option label="10号激光厅" value="10" />
          </el-select>
        </el-form-item>

        <el-form-item label="电影类型">
          <el-radio-group v-model="movie.fnType">
            <el-radio label="犯罪悬疑" />
            <el-radio label="动作犯罪" />
            <el-radio label="喜剧动作" />
            <el-radio label="剧情爱情" /><br>
            <el-radio label="科幻动作" />
            <el-radio label="人物传记" />
            <el-radio label="古装剧情" />
            <el-radio label="灾难冒险" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="电影地区">
          <el-input v-model="movie.fnCountry" placeholder="填写电影地区" style="width: 200px" />
        </el-form-item>

        <el-form-item label="片长(分钟)">
          <el-input v-model="movie.fnTime" type="number" placeholder="请填写电影片长" style="width: 200px" class="inp" />
        </el-form-item>

        <el-form-item label="票价设置">
          <el-input v-model="movie.fnPrice" type="number" placeholder="请填写上映票价(元)" style="width: 200px" class="inp" />
        </el-form-item>

        <el-form-item label="电影简介">
          <el-input v-model="movie.fnIntro" type="textarea" placeholder="请填写关于电影的简介..." style="width: 500px" />
        </el-form-item>

        <el-form-item id="buttall">
          <el-button type="primary" @click="onSubmit(movie)">立即添加</el-button>
          <el-button id="butt2" @click="retu">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Qs from 'qs'
export default {
  name: 'AddHotMovies',
  data() {
    return {
      movie: {
        fnName: '',
        fnImg: '',
        fnDirector: '',
        fnActor: '',
        fnLanguage: '',
        fnSence: '',
        fnType: '',
        fnTime: '',
        fnPrice: '',
        fnPic: '',
        fnIntro: '',
        fnCountry: '',
        fnishow: ''
      }
    }
  },
  methods: {
    retu() {
      this.$router.push({ name: 'HotIndext' })
    },
    onSubmit(movie) {
      var vm = this
      this.axios({
        url: 'http://localhost:81/api/hot/insertMovie',
        method: 'post',
        transformRequest: [function(data) {
          return Qs.stringify(data)
        }],
        data: movie
      }).then(function(res) {
        if (res.data.success) {
          vm.$message({ // 显示添加成功
            type: 'success',
            message: '添加成功!'
          })
          vm.$router.push({ name: 'HotIndext' })
        } else {
          vm.$message({ // 显示添加失败
            type: 'info',
            message: '添加失败!'
          })
        }
      })
    }
  }
}
</script>

<style scoped>
  #box{
    width: 660px;
    height: 1000px;
    border: 1px solid #DCDFE6;
    border-radius: 8px;
    margin-left: 280px;
    margin-top: 30px;
  }
  .inp{
    width: 500px;
  }
  #buttall{
    margin-left: 70px;
  }
  #butt2{
    margin-left: 70px;
  }
</style>
